<script setup>
import ModifyUser from '@/components/ModifyUser.vue'
import PageContains from '@/components/PageContains.vue'
import { reactive, ref } from 'vue'
import { updatauserinfo } from '@/api/user.js'
import { Plus } from '@element-plus/icons-vue'
// import type { UploadProps } from 'element-plus'

// 接收父组件传来的用户信息
const props = defineProps({
  userinfo: {
    type: Object,
    required: true
  }
})

// 表单所需的对象、数组
let userData = reactive({ ...props.userinfo })
// 中文标签数组
const formLabels = ['用户昵称', '用户邮箱']
// 与中文标签对应的英文属性名数组
const formFields = ['nickname', 'email']
//输入框类型
// 接受子组件传来的数据
const changFn = (newData) => {
  userData = newData
}
// 定义向父组件发射昵称
const emit = defineEmits(['updatanickname'])

// 修改提交用户信息
const submit = async () => {
  // 接受子组件传来的数据
  changFn
  // console.log('提交的数据', userData.value)
  await updatauserinfo(userData)
  console.log(userData.nickname)
  // 接口连接成功后，将昵称返回给父组件
  emit('updatanickname', userData.nickname)
}

// 初始头像
const imageUrl = ref('userData.user_pic')
// 上传成功后的回调函数
</script>
<template>
  <PageContains title="基本信息">
    <div>
      <div class="container">
        <div>
          <el-upload class="avatar-uploader" :show-file-list="false">
            <img v-if="imageUrl" :src="userData.user_pic" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <!-- <el-avatar
            class="useravatar"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          /> -->
        </div>
        <ModifyUser
          @modelValue="changFn"
          v-model="userData"
          :formLabels="formLabels"
          :formFields="formFields"
        >
          <template #bottom>
            <el-button @click="submit" value>修改</el-button>
          </template>
        </ModifyUser>
      </div>
    </div>
  </PageContains>
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
}
.useravatar {
  width: 100px;
  height: 100px;
  margin: 20px;
}

/* 头像样式 */
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
